<script setup lang="ts">
import {AccountService} from '@/apis/account';
import {onMounted, reactive} from 'vue'
import AccountFromCard from "@/components/account/AccountFromCard.vue";
import logo from '@/assets/image/JingShield-logo.svg'
const state = reactive({
	loginDescription: {
		title: 'Welcome back',
		description: 'To continue,please verify is you',
		footer: "Don't have account?",
		remember: 'Remember me',
		forgotPassword: 'FORGOT PASSWORD?',
		isRemember: true,
	},
	formData: {
		email: '',
		password: '',
	},
})

function onSubmit() {
	const loginUrl = AccountService.login();
	$axios.post(loginUrl, state.formData).then((res: any) => {
		console.log('res:login ', res);
	}).catch((err: any) => {
		console.log('err:login ', err);
	})
}

onMounted(() => {

})
</script>
<template>
	<div class="login-form">
		<AccountFromCard submit="onSubmit" :data="state.loginDescription">
			<template #content>
				<p class="login-form-main">
					<a-input placeholder="Email"></a-input>
				</p>
				<p class="login-form-main">
					<a-input-password placeholder="Password"></a-input-password>
				</p>
				<p class="login-form-forgot flex-between">
					<a-checkbox v-model="state.loginDescription.isRemember">{{state.loginDescription.remember}}</a-checkbox>
					<a-link>{{state.loginDescription.forgotPassword}}</a-link>
				</p>
				<p class="login-form-submit">
					<a-button type="primary" block>SIGN IN</a-button>
				</p>
				<p class="login-form-more flex-center">
					or sign in with
				</p>
				<p class="login-form-other flex-center">
					<a-link><img :src="logo" alt="">Google</a-link>
					<a-link><img :src="logo" alt="">FaceBook</a-link>
				</p>
			</template>
			<template #footer>
			</template>
		</AccountFromCard>
	</div>
</template>
<style lang='less'>
.login-form{
	height: 100%;
	.login-form-main{
		margin: 0.3rem auto;
		input{
			height: 1rem;
		}
	}
	.login-form-forgot{
		padding: 0.4rem 0;
		.arco-checkbox,a{
			font-size: 0.3rem;
		}
	}
	.login-form-submit{
		margin: 0 auto;
		width: 96%;
		button{
			width: 100%;
			padding: 0.6rem 0;
			border-radius: 0.1rem;
			border: none;
			background: linear-gradient(to right, rgb(251, 143, 102), rgb(112, 51, 255));
		}
	}
	.login-form-more{
		padding-top: 0.8rem;
		text-align: center;
		font-size: 0.4rem;
		color: #aaa;
	}
	.login-form-other{
		height: 1.8rem;
		img {
			width: 0.5rem;
		}
		a{
			width: 2.5rem;
			margin: 0 0.5rem;
			background-color: #cccccc;
			padding: 0.2rem 0.5rem;
			color: #41b733;
		}
	}
}
</style>